<template>
	<view :class="themeName">
		<view class="menuBox">
			<view class="menuItem" :class="menuIndex==index?'menuActive':''" v-for="(item,index) in menuArr"
				:key="index" @click="changeMenu(index)">
				{{item}}
			</view>
		</view>
		<u-tabs font-size="28" name="tabsName" inactive-color="#333" :active-color="themeColor" :list="lists"
			:is-scroll="false" :current="current" @change="change">
		</u-tabs>

		<block v-for="(items, index) in lists" :key="index">
			<mescroll-uni v-if="items.isShow === true" ref="mescrollRef" bgColor="white" top="100rpx"
				@init="mescrollInit" :up="upOption" @down="downCallback" @up="upCallback">
				<block v-for="(item, cIndex) in list" :key="cIndex">
					<view class="m-b-24 p-l-24 p-r-24">
						<coupon-card mode="get" :discount_max_money="item.discount_max_money"
							:discount_ratio="item.discount_ratio" :condition_type="item.condition_type"
							:desc="{ title: '使用说明', content: [item.tips] }" :name="item.name" :money="item.money"
							:condition="item.condition" :time="item.use_time_text2" :scene="item.use_scene"
							:coupon-id="item.id" :gotten="item.is_get" :button="{
                                name: getBtn,
                                theme: getBtn == '去使用' ? 'primary' : 'disable'
                            }" @button="getCoupon" />
					</view>
				</block>
			</mescroll-uni>
		</block>
	</view>
</template>

<script>
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
	import {
		apiCouponGet
	} from '@/api/activity'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				menuArr: ['商品', '课程'],
				menuIndex: 0,
				lists: [{
						tabsName: '可使用(0)',
						isShow: true,
						type: 0
					},
					{
						tabsName: '已使用(0)',
						isShow: false,
						type: 1
					},
					{
						tabsName: '已过期(0)',
						isShow: false,
						type: 2
					}
				],
				current: 0,

				list: [], //优惠券的数据

				extend: {},

				showTips: [],
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: 'https://cdn.zkjialan.com/img1/empty/coupon.png',
						tip: '暂无优惠券数据', // 提示
						fixed: true,
						top: '200rpx'
					}
				},
				page_no: 1
			}
		},

		computed: {
			getBtn() {
				let text = ''
				switch (this.lists[this.current].type) {
					case 0:
						text = '去使用'
						break
					case 1:
						text = '已使用'
						break
					case 2:
						text = '已过期'
						break
				}
				return text
			}
		},

		methods: {
			changeMenu(index) { //商品 课程
				console.log('当前选中的项：' + index)
				this.page_no = 1;
				this.menuIndex = index;
				this.upCallback();
			},
			change(index) {
				for (let i = 0; i < this.lists.length; i++) {
					this.lists[i].isShow = false
				}
				this.current = index
				this.lists[index].isShow = true
			},

			upCallback() {
				//查询商品优惠券
				if (this.menuIndex == 0) {
					this.$request.get(
							`shopapi/coupon/my?status=${this.lists[this.current].type}&page_no=${this.page_no}&page_size=10`
							)
						.then((res1) => {
							console.log(res1);
							let res = res1.data.data;
							this.lists[0].tabsName = `可使用(${res.extend.normal})`
							this.lists[1].tabsName = `已使用(${res.extend.use})`
							this.lists[2].tabsName = `已过期(${res.extend.invalid})`
							if (this.page_no == 1) this.list = [] //如果是第一页需手动置空列表
							this.list = this.list.concat(res.lists) //追加新数据
							this.mescroll.endSuccess(res.lists.length, res.count)
						})
						.catch((err) => {
							this.mescroll.endErr()
						})
				} else {
					this.$request.get(
							`course/coupon/userCouponLists?status=${this.lists[this.current].type+1}&page_no=${this.page_no}&page_size=10`
							)
						.then((res1) => {
							console.log(res1);
							let res = res1.data.data;
							this.lists[0].tabsName = `可使用(${res.extend.normal})`
							this.lists[1].tabsName = `已使用(${res.extend.use})`
							this.lists[2].tabsName = `已过期(${res.extend.invalid})`
							if (this.page_no == 1) this.list = [] //如果是第一页需手动置空列表
							this.list = this.list.concat(res.lists) //追加新数据
							this.mescroll.endSuccess(res.lists.length, res.count)
						})
						.catch((err) => {
							this.mescroll.endErr()
						})
				}

				// apiCouponGet({
				// 		status: this.lists[this.current].type,
				// 		page_no: num,
				// 		page_size: size,
				// 	})
				// 	.then((res) => {
				// 		this.lists[0].tabsName = `可使用(${res.extend.normal})`
				// 		this.lists[1].tabsName = `已使用(${res.extend.use})`
				// 		this.lists[2].tabsName = `已过期(${res.extend.invalid})`
				// 		if (num == 1) this.list = [] //如果是第一页需手动置空列表
				// 		this.list = this.list.concat(res.lists) //追加新数据
				// 		this.mescroll.endSuccess(res.lists.length, res.count)
				// 	})
				// 	.catch((err) => {
				// 		this.mescroll.endErr()
				// 	})
			},

			getCoupon() {
				if (this.current == 0 && this.menuIndex == 0) {
					uni.reLaunch({
						url: '/pages/category/category'
					})
				}
				if (this.current == 0 && this.menuIndex == 1) {
					uni.reLaunch({
						url: '/pages/course/course'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .mescroll-uni-fixed {
		top: 180rpx !important;
	}

	.menuBox {
		width: 100%;
		height: 80rpx;
		background-color: #efefef;
		display: flex;

		.menuItem {
			width: 50%;
			height: 100%;
			font-size: 32rpx;
			font-family: 'ar';
			text-align: center;
			line-height: 80rpx;
		}

		.menuActive {
			background-color: #f08329;
			color: #fff;
		}
	}

	.coupon-list {
		padding: 0 24rpx;
		overflow: hidden;
	}
</style>